<template>
    <div class="commodity_list">
        <!--系列-->
        <div class="goodsClassification">
            <div class="col-xs-6 text-center">
                <div class="instrument" @click="changeGroup('弦乐')">
                    <h2 class="yellowFont">提琴系类</h2>
                    <h1>弦乐<span>查看详情</span><span class="yellowFont">&gt;</span></h1>
                </div>
            </div>
            <div class="col-xs-6 text-center">
                <div class="instrument" @click="changeGroup('管乐')">
                    <h2 class="yellowFont">笛号系类</h2>
                    <h1>管乐<span>查看详情</span><span class="yellowFont">&gt;</span></h1>
                </div>
            </div>
        </div>
        <!--系列详情-->
        <div class="goodsSeries">
            <div class="goodsTypeface" v-if="group_name=='弦乐'">弦乐</div>
            <div class="goodsTypeface" v-if="group_name=='管乐'||group_name==''">{{group_name?'管乐':'其他'}}</div>
            <div class="goodsDetails">
                <div>
                    <span v-if="group_name=='弦乐'">
                        小提琴、大提琴、中提琴、小提琴、大提琴、中提琴
                    </span>
                    <span v-if="group_name=='管乐'">
                        长笛、短笛、单簧管、萨克管乐器族、双簧管、英国管
                    </span>
                </div>
            </div>
            <div class="goodsImg"><img src="../images/right_1.png" width="100%" height="100%"></div>
        </div>
        <!--商品详情-->
        <div class="commodityDetails clearfix">
            <div class="header">
                <div class="list">
                    <ul  class="nav navbar-nav">
                        <li>
                            <router-link to="/" >
                                <i class="glyphicon glyphicon-home"></i>
                            </router-link>
                        </li>
                        <li v-if="menuSet.group_name==group_name || group_name!='弦乐' && group_name!='管乐'"
                            v-for="(menuSet, index) in menu.menu_sets"
                            @click="menuSetIndex = index"
                            :class="{active:menuSetIndex==index}"
                        >{{menuSet.name}}</li>
                    </ul>
                </div>
            </div>
            <div class="itemDetails">
                <goods :list="list"></goods>
            </div>

        </div>
    </div>
</template>

<script>
require('./commodity-list.css');
var goods=require('./lib/goods.vue');
var urlParm=require('./lib/urlParm');
module.exports={
    components:{
        goods:goods,
    },
    data:function () {
        return{
            id:'',
            group_name:'',
            menuSetIndex:'',
            menu:{},
            goodsInfo:[],
            secondClass:'',
        }
    },
    computed: {
        list: function() {
            var list=[];
            if(!this.menu.menu_sets || this.menuSetIndex==='') {
                return list;
            }
            for(var i=0;i<this.menu.menu_sets[this.menuSetIndex].menu_goods.length;i++){
                var menuGoods = this.menu.menu_sets[this.menuSetIndex].menu_goods[i];
                for(var k=0;k<this.goodsInfo.length;k++){
                    if(menuGoods.goods_id==this.goodsInfo[k].id){
                        list.push(this.goodsInfo[k]);
                    }
                }
            }
            return list;
        }
    },
    methods:{
        changeGroup: function(group_name) {
            this.group_name = group_name;
            for(var j=0;j<this.menu.menu_sets.length;j++) {
                if(group_name==this.menu.menu_sets[j].group_name) {
                    this.menuSetIndex = j;
                    break;
                }
            }
        }
    },
    created:function () {
        var self=this;
        var url=urlParm.default();
        this.id=url.id;
        this.group_name=decodeURI(url.group_name);
        this.menu_set_id=url.menu_set_id;
        if(this.id){
            JxSdk.menu.get(this.id).then(function (data) {
                self.menu = data.menu;
                JxSdk.goods.list('NORMAL', null, 0, 1000).then(function (info) {
                    self.goodsInfo=info.list;
                    for(var j=0;j<data.menu.menu_sets.length;j++) {
                        if(self.menu_set_id==data.menu.menu_sets[j].id) {
                            self.menuSetIndex = j;
                            break;
                        }
                    }
                })
            })
        }

    }
}
</script>